<!DOCTYPE html>
<html lang="en" xmlns:sa="http://www.thymeleaf.org/extras/sa-token"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>定时任务执行日志</title>
    <!--公共模块-->
    <div th:replace="~{layout}"></div>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <h3>定时任务执行日志</h3>
        </div>
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <form class="layui-form layui-form-pane" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">任务名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="taskName" placeholder="请输入任务名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">执行状态</label>
                        <div class="layui-input-inline">
                            <select name="executeStatus">
                                <option value="">全部</option>
                                <option value="1">成功</option>
                                <option value="0">失败</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary" lay-filter="searchForm">重置</button>
                    </div>
                </div>
            </form>

            <!-- 操作按钮区域 -->
            <div class="layui-form-item">
<!--                <button class="layui-btn layui-btn-danger" id="clearLogsBtn">-->
<!--                    <i class="layui-icon layui-icon-delete"></i> 清空日志-->
<!--                </button>-->
                <button class="layui-btn layui-btn-normal" id="refreshBtn">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>
                <button class="layui-btn layui-btn-primary" id="backBtn">
                    <i class="layui-icon layui-icon-return"></i> 返回
                </button>
            </div>

            <!-- 数据表格 -->
            <table id="dataTable" lay-filter="dataTable"></table>
        </div>
    </div>
</div>

<!-- 状态列模板 -->
<script type="text/html" id="statusTpl">
    {{# if(d.executeStatus == 1) { }}
    <span style="color: #5FB878;">成功</span>
    {{# } else { }}
    <span style="color: #FF5722;">失败</span>
    {{# } }}
</script>

<script th:inline="none">
    layui.use(['table', 'form', 'layer', 'laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;

        // 获取URL参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURIComponent(r[2]); return null;
        }

        // 获取任务名称参数
        var taskName = getUrlParam('taskName');
        console.log('URL参数taskName:', taskName);
        
        // 如果有任务名称参数，预填充到搜索表单中
        if(taskName) {
            $('input[name="taskName"]').val(taskName);
            form.render();
        }

        // 初始化表格
        var tableIns = table.render({
            elem: '#dataTable',
            url: '/manager/scheduledTaskLog/listByPage',
            method: 'post',
            contentType: 'application/json',
            where: taskName ? {taskName: taskName} : {},
            page: true,
            limit: 20,
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'taskName', title: '任务名称', width: 150},
                {field: 'targetString', title: '目标字符串', width: 250},
                {field: 'executeTime', title: '执行时间', width: 180},
                {field: 'executeStatus', title: '执行状态', width: 100, templet: '#statusTpl'},
                {field: 'executeMessage', title: '执行消息', width: 200},
                {field: 'executeDuration', title: '执行耗时(ms)', width: 120, templet: function(d){
                    return d.executeDuration || '0';
                }},
                {field: 'createTime', title: '创建时间', width: 180}
            ]],
            parseData: function(res){
                console.log('表格解析数据:', res);
                var result = {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data ? res.data.total : 0,
                    "data": res.data ? res.data.records : []
                };
                console.log('解析结果:', result);
                return result;
            },
            done: function(res, curr, count) {
                console.log('表格加载完成:', res);
                console.log('当前页:', curr);
                console.log('总条数:', count);
                
                // 如果是第一页且数据加载成功，清空搜索表单
                if(curr === 1 && res && res.data && res.data.records && res.data.records.length > 0) {
                    setTimeout(function(){
                        console.log('开始清空搜索表单');
                        // 清空搜索表单
                        var searchForm = $('form[lay-filter="searchForm"]')[0];
                        if(searchForm) {
                            searchForm.reset();
                            // 重新渲染表单
                            form.render();
                            console.log('搜索表单已清空');
                        } else {
                            console.log('未找到搜索表单');
                        }
                    }, 300);
                }
            }
        });

        // 搜索功能
        form.on('submit(search)', function(data){
            console.log('搜索按钮被点击，搜索条件:', data.field);
            tableIns.reload({
                where: data.field,
                page: {curr: 1}
            });
            
            return false;
        });

        // 重置按钮事件
        form.on('reset(searchForm)', function(data){
            console.log('重置按钮被点击');
            // 清空表单
            var searchForm = $('form[lay-filter="searchForm"]')[0];
            if(searchForm) {
                searchForm.reset();
                form.render();
            }
            // 重新加载表格
            setTimeout(function(){
                tableIns.reload({
                    where: {},
                    page: {curr: 1}
                });
            }, 100);
        });

        // 为主页面重置按钮添加点击事件监听器
        $('button[type="reset"]').on('click', function(){
            console.log('重置按钮被点击');
            setTimeout(function(){
                // 清空表单
                var searchForm = $('form[lay-filter="searchForm"]')[0];
                if(searchForm) {
                    searchForm.reset();
                    form.render();
                }
                // 重新加载表格
                tableIns.reload({
                    where: {},
                    page: {curr: 1}
                });
            }, 100);
        });

        // // 清空日志按钮
        // $('#clearLogsBtn').on('click', function(){
        //     layer.confirm('确定要清空所有执行日志吗？此操作不可恢复！', function(index){
        //         CoreUtil.sendDelete('/manager/scheduledTaskLog/clearLogs', null, function(res){
        //             layer.msg('日志清空成功');
        //             tableIns.reload();
        //         });
        //         layer.close(index);
        //     });
        // });

        // 刷新按钮
        $('#refreshBtn').on('click', function(){
            tableIns.reload();
            layer.msg('刷新成功');
        });

        // 返回按钮
        $('#backBtn').on('click', function(){
            // 返回到定时任务列表页面
            window.location.href = '/manager/index/scheduledTask';
        });

        // 如果URL中有任务名称参数，设置到搜索框中
        if(taskName) {
            setTimeout(function(){
                $('input[name="taskName"]').val(taskName);
                form.render();
            }, 100);
        }
    });
</script>

</body>
</html>
